<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>执念…………</title>
  <link rel="stylesheet" href="./css/index.css">
  <link rel="shortcut icon" href="./img/gudu.png">
</head>
<script src="./js/jquery-1.12.4.min.js"></script>
<script src="./js/index.js"></script>
<body>
  <!-- 最大的盒子 -->
  <div class="big_vessel">
    <!-- 信封盒子 -->
    <div class="envelope_box show_box">
      <!-- 阴影三角 -->
      <div class="shadow_box"></div>
      <!-- 覆盖三角 -->
      <div class="lid_box"></div>
      <!-- 印泥 -->
      <div class="ink_pad_box">
        <span class="open_letter" onclick="playAudio()">玲亲启</span>
      </div>
    </div>
    <!-- 信纸盒子 -->
    <div class="paper_box hidden_box">
      <div class="content_box">
        时光荏苒，又是一年阳春六月，都说岁月最是无情，不外如是。<br>
        提笔良久，未果；阁外听雨，了然。<br>
        世人皆言：“相逢便是有缘”，然陈乃一介布衣，岂敢妄论？<br>
        佛曰：“缘起缘灭，存乎一念。”陈言：“不过是怒海惊涛中的两粒微尘，不起波澜，何求波澜？”<br>
        于情,得之我幸,失之我命,何苦黯然神伤?<br>
        旧时,有喜无悲,万幸之至,个中枝蔓不过尔尔,实乃陈之命也。<br>
        君之所念，乃陈之所想。<br>
        宫曾言：“人生就是一辆开往坟墓的列车，路途上会有很多站，很难有人可以自始至终陪着走完。当陪你的人要下车时，即使不舍也该心存感激，然后挥手道别。”<br>
        浮云世事，且让它渐行渐远，今后静待花开，岁月静好。<br>
        <div class="return_button" onclick="pauseAudio()">( ￣︶￣ )</div>
      </div>
    </div>
    <!-- 音乐播放器 -->
    <div class="music_player_box">
      <audio id="music_btn" src="./music/可惜我們不會再見了.mp3" loop></audio>
    </div>
  </div>
</body>
<script src="./js/playTheMusic.js"></script>
</html>